<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="">
<meta name="author" content="">

<title>视频详情</title>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="../page/css/bootstrap.min.css" type="text/css">

<!-- Custom CSS -->
<link rel="stylesheet" href="../page/css/style.css">

<!-- Comment CSS -->
<link rel="stylesheet" href="../page/css/comment.css">

<!-- Owl Carousel Assets -->
<link href="../page/owl-carousel/owl.carousel.css" rel="stylesheet">
<link href="../page/owl-carousel/owl.theme.css" rel="stylesheet">

<!-- Custom Fonts -->
<link rel="stylesheet"
	href="../page/font-awesome-4.4.0/css/font-awesome.min.css" type="text/css">

<!-- jQuery and Modernizr-->
<!-- <script src="../page/js/jquery-1.8.3.min.js"></script> -->
<script src="../page/js/jquery-2.1.1.js"></script>

<!-- Core JavaScript Files -->
<script src="../page/js/bootstrap.min.js"></script>


<title>Insert title here</title>
</head>
<body>
<header>
	<!--Top-->
	<nav id="top">
		<div class="container">
			<div class="row">
				<div class="col-md-6 col-sm-6">
					<strong>Welcome to KOOLTUBE!</strong>
				</div>
				<div class="col-md-6 col-sm-6">
					<ul class="list-inline top-link link">
						<li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
						<li><a href="contact.html"><i class="fa fa-comments"></i> Contact</a></li>
						<li><a href="#"><i class="fa fa-question-circle"></i> FAQ</a></li>
					</ul>
				</div>
			</div>
		</div>
	</nav>
	
	<!--Navigation-->
    <nav id="menu" class="navbar">
		<div class="container">
			<div class="navbar-header"><span id="heading" class="visible-xs">Categories</span>
			  <button type="button" class="btn btn-navbar navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"><i class="fa fa-bars"></i></button>
			</div>
			<div class="collapse navbar-collapse navbar-ex1-collapse">
				<ul class="nav navbar-nav">
					<li><a href="index.html"><i class="fa fa-home"></i> Home</a></li>
					<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-user"></i> Account</a>
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li><a href="archive.html">Login</a></li>
									<li><a href="archive.html">Register</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-play-circle-o"></i> Video</a>
						<div class="dropdown-menu">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li><a href="archive.html">Text 201</a></li>
									<li><a href="archive.html">Text 202</a></li>
									<li><a href="archive.html">Text 203</a></li>
									<li><a href="archive.html">Text 204</a></li>
									<li><a href="archive.html">Text 205</a></li>
								</ul>
							</div> 
						</div>
					</li>
					<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-list"></i> Category</a>
						<div class="dropdown-menu" style="margin-left: -203.625px;">
							<div class="dropdown-inner">
								<ul class="list-unstyled">
									<li><a href="archive.html">Text 301</a></li>
									<li><a href="archive.html">Text 302</a></li>
									<li><a href="archive.html">Text 303</a></li>
									<li><a href="archive.html">Text 304</a></li>
									<li><a href="archive.html">Text 305</a></li>
								</ul>
								<ul class="list-unstyled">
									<li><a href="archive.html">Text 306</a></li>
									<li><a href="archive.html">Text 307</a></li>
									<li><a href="archive.html">Text 308</a></li>
									<li><a href="archive.html">Text 309</a></li>
									<li><a href="archive.html">Text 310</a></li>
								</ul>
								<ul class="list-unstyled">
									<li><a href="archive.html">Text 311</a></li>
									<li><a href="archive.html">Text 312</a></li>
									<li><a href="archive.html#">Text 313</a></li>
									<li><a href="archive.html#">Text 314</a></li>
									<li><a href="archive.html">Text 315</a></li>
								</ul>
							</div>
						</div>
					</li>
					<li><a href="archive.html"><i class="fa fa-cubes"></i> Blocks</a></li>
					<li><a href="contact.html"><i class="fa fa-envelope"></i> Contact</a></li>
				</ul>
			</div>
		</div>
	</nav>
	
	<div class="header-slide">
		<div id="owl-demo" class="owl-carousel">
			<div class="item">
				<div class="zoom-container">
					<div class="zoom-caption">
						<span>Video's Tag</span>
						<a href="single.html">
							<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
						</a>
						<p>Video's Name</p>
					</div>
					<img src="../page/images/2.jpg" />
				</div>
			</div>
			<div class="item">
				<div class="zoom-container">
					<div class="zoom-caption">
						<span>Video's Tag</span>
						<a href="single.html">
							<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
						</a>
						<p>Video's Name</p>
					</div>
					<img src="../page/images/3.jpg" />
				</div>
			</div>
			<div class="item">
				<div class="zoom-container">
					<div class="zoom-caption">
						<span>Video's Tag</span>
						<a href="single.html">
							<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
						</a>
						<p>Video's Name</p>
					</div>
					<img src="../page/images/4.jpg" />
				</div>
			</div>
			<div class="item">
				<div class="zoom-container">
					<div class="zoom-caption">
						<span>Video's Tag</span>
						<a href="single.html">
							<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
						</a>
						<p>Video's Name</p>
					</div>
					<img src="../page/images/5.jpg" />
				</div>
			</div>
			<div class="item">
				<div class="zoom-container">
					<div class="zoom-caption">
						<span>Video's Tag</span>
						<a href="single.html">
							<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
						</a>
						<p>Video's Name</p>
					</div>
					<img src="../page/images/6.jpg" />
				</div>
			</div>
			<div class="item">
				<div class="zoom-container">
					<div class="zoom-caption">
						<span>Video's Tag</span>
						<a href="single.html">
							<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
						</a>
						<p>Video's Name</p>
					</div>
					<img src="../page/images/7.jpg" />
				</div>
			</div>
			<div class="item">
				<div class="zoom-container">
					<div class="zoom-caption">
						<span>Video's Tag</span>
						<a href="single.html">
							<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
						</a>
						<p>Video's Name</p>
					</div>
					<img src="../page/images/8.jpg" />
				</div>
			</div>
			<div class="item">
				<div class="zoom-container">
					<div class="zoom-caption">
						<span>Video's Tag</span>
						<a href="single.html">
							<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
						</a>
						<p>Video's Name</p>
					</div>
					<img src="../page/images/9.jpg" />
				</div>
			</div>
		</div>
	</div>
</header>
<!-- Header -->
	
	<!-- /////////////////////////////////////////Content -->
	<div id="page-content" class="single-page">
		<div class="container">
			<div class="row">
				<div id="main-content" class="col-md-8">
					<div class="wrap-vid">
						<iframe id="videoUrl" width="100%" height="400" src="https://www.youtube.com/embed/ImMw_5byGmA" frameborder="0" allowfullscreen></iframe>
					</div>
					<div class="share">
						<ul class="list-inline center">
							<li><a href="#" class="btn btn-facebook"><i class="fa fa-facebook"></i> Share</a></li>
							<li><a href="#" class="btn btn-twitter"><i class="fa fa-twitter"></i> Tweet</a></li>
							<li><a href="#" class="btn btn-pinterest"><i class="fa fa-pinterest"></i> Tweet</a></li>
							<li><a href="#" class="btn btn-google"><i class="fa fa-google-plus-square"></i> Google+</a></li>
							<li><a href="#" class="btn btn-mail"><i class="fa fa-envelope-o"></i> E-mail</a></li>
						</ul>
					</div>
					<div class="line"></div>
					<h1 class="vid-name"><a href="../videoInfo/singleInitInfos?videoId=${videoInfo.videoId}">${videoInfo.videoName}</a></h1>
					<div class="info">
						<h5>By <a href="#">${videoType.voTypeName }</a></h5>
						<span><i class="fa fa-calendar"></i>${videoInfo.createTime }</span> 
						<span><i class="fa fa-heart"></i>${videoInfo.loveNumber }</span>
					</div>
					<p style="margin-top: 20px">${videoInfo.videoDetails }</p>
					<h4>观友评论
						<span class="comment-total">
							（已有
								<c:if test="${pageUtil.total == null}">
									0
								</c:if>
								<c:if test="${pageUtil.total != null}">
									${pageUtil.total }
								</c:if>
							条评论）
						</span>
					</h4>
					<div class="vid-tags">
						<c:if test="${pageUtil.rows == null }">
							<center><span class="comment-total">暂无评论！</span></center>
						</c:if>
						<c:if test="${pageUtil.rows != null }">
							<div class="comments">
								<c:forEach items="${pageUtil.rows }" var="r">
									<div>
										<div class="avatar">
											<img src="../page/images/default.jpg" width="48" height="48" alt="NERO" title="NERO" />
										</div>
										<div class="comment-info">
											<span class="poster">
												<i class="fa fa-user mar-r-4 green"></i> 
												<a title="点击访问：http://icning.com" href="http://lanyes.org/go.php?url=aHR0cDovL2ljbmluZy5jb20=" target="_blank" rel="external nofollow">${r.userInfo.userAlias }</a>
											</span>
											<span class="comment-time">
												<i class="fa fa-clock-o mar-r-4"></i>
												${r.commentTime }
											</span>
											<div class="comment-content">${r.commentDetails }</div>	
											<div class="line" style="width: 97%;margin-left: 10px;"></div>	
										</div>
									</div>
								</c:forEach>
							</div>
							<div class="comments-oper">
								<a href="../videoInfo/singleInitInfos?videoId=${videoInfo.videoId}">首页</a>
								<c:if test="${pageUtil.pageIndex <= 1 }">
									<a href="../videoInfo/singleInitInfos?videoId=${videoInfo.videoId}">上一页</a>
								</c:if>
								<c:if test="${pageUtil.pageIndex > 1 }">
									<a href="../videoInfo/singleInitInfos?videoId=${videoInfo.videoId}&pageIndex=${pageUtil.pageIndex - 1}">上一页</a>
								</c:if>
								<c:if test="${pageUtil.pageIndex >=  pageUtil.pageNum}">
									<a href="../videoInfo/singleInitInfos?videoId=${videoInfo.videoId}&pageIndex=${pageUtil.pageNum}">下一页</a>
								</c:if>
								<c:if test="${pageUtil.pageIndex <  pageUtil.pageNum}">
									<a href="../videoInfo/singleInitInfos?videoId=${videoInfo.videoId}&pageIndex=${pageUtil.pageIndex + 1}">下一页</a>
								</c:if>
								<a href="../videoInfo/singleInitInfos?videoId=${videoInfo.videoId}&pageIndex=${pageUtil.pageNum}">尾页</a>
								<a href="../videoInfo/singleInitInfos?videoId=${videoInfo.videoId}">刷新</a>
							</div>
						</c:if>
					</div>
					<div class="line"></div>
					<div class="comment">
						<h3>发表你的评论吧</h3>
						<form name="form1" method="post" action="" id="myForm">
							<div class="row">
								<div class="col-md-12">
									<input type="hidden" value="${videoInfo.videoId}" name="videoId" id="videoId1" />
									<div class="form-group">
										<textarea name="commentDetails" id="message" class="form-control" rows="4" cols="25" required="required"
										placeholder="Message"></textarea>
									</div>						
									<button type="button" class="btn btn-4 btn-block" name="btnSend" id="btnSend">
								发表评论</button>
								</div>
							</div>
						</form>
					</div>
					<div class="line"></div>
					<div class="box">
						<div class="box-header">
							<h2><i class="fa fa-globe"></i>分类相关</h2>
						</div>
						<div class="box-content">
							<div class="row">
								<c:forEach items="${typeHottestVideos }" var="v">
									<div class="col-md-4">
										<div class="wrap-vid">
											<div class="zoom-container">
												<div class="zoom-caption">
													<c:forEach items="${videoTypes }" var="t">
														<c:if test="${t.voTypeId == v.vTypeId }">
															<span>${t.voTypeName }</span>
														</c:if>
													</c:forEach>
													<a href="../videoInfo/singleInitInfos?videoId=${v.videoId}">
														<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
													</a>
													<p>${v.videoName }</p>
												</div>
												<img src="${v.videoCover }" />
											</div>
											<h3 class="vid-name"><a href="../videoInfo/singleInitInfos?videoId=${v.videoId}">${v.videoName }</a></h3>
											<div class="info">
												<h5>By 
													<a href="../videoInfo/singleInitInfos?videoId=${v.videoId}">
														<c:forEach items="${videoTypes }" var="t">
															<c:if test="${t.voTypeId == v.vTypeId }">
																${t.voTypeName }
															</c:if>
														</c:forEach>
													</a>
												</h5>
												<span><i class="fa fa-calendar"></i>${v.createTime }</span> 
												<span><i class="fa fa-heart"></i>${v.loveNumber }</span>
											</div>
										</div>
									</div>
								</c:forEach>
							</div>
						</div>
					</div>
				</div>
				<div id="sidebar" class="col-md-4">
					<!---- Start Widget ---->
					<div class="widget wid-follow">
						<div class="heading"><h4><i class="fa fa-users"></i> Follow Us</h4></div>
						<div class="content">
							<ul class="list-inline">
								<li>
									<a href="facebook.com/">
										<div class="box-facebook">
											<span class="fa fa-facebook fa-2x icon"></span>
											<span>1250</span>
											<span>Fans</span>
										</div>
									</a>
								</li>
								<li>
									<a href="facebook.com/">
										<div class="box-twitter">
											<span class="fa fa-twitter fa-2x icon"></span>
											<span>1250</span>
											<span>Fans</span>
										</div>
									</a>
								</li>
								<li>
									<a href="facebook.com/">
										<div class="box-google">
											<span class="fa fa-google-plus fa-2x icon"></span>
											<span>1250</span>
											<span>Fans</span>
										</div>
									</a>
								</li>
							</ul>
							<img src="${videoInfo.videoCover }" />
						</div>
						<div class="line"></div>
					</div>
					<!---- Start Widget ---->
					<div class="widget wid-post">
						<div class="heading"><h4><i class="fa fa-globe"></i>火热视频</h4></div>
						<div class="content">
							<c:forEach items="${hottestVideos }" var="v">
								<div class="post wrap-vid">
									<div class="zoom-container">
										<div class="zoom-caption">
											<c:forEach items="${videoTypes }" var="t">
												<c:if test="${t.voTypeId == v.vTypeId }">
													<span>${t.voTypeName }</span>
												</c:if>
											</c:forEach>
											<a href="../videoInfo/singleInitInfos?videoId=${v.videoId}">
												<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
											</a>
											<p>${v.videoName }</p>
										</div>
										<img src="${v.videoCover }" />
									</div>
									<div class="wrapper">
										<h5 class="vid-name"><a href="../videoInfo/singleInitInfos?videoId=${v.videoId}">${v.videoName }</a></h5>
										<div class="info">
											<h6>By 
												<a href="../videoInfo/singleInitInfos?videoId=${v.videoId}">
													<c:forEach items="${videoTypes }" var="t">
														<c:if test="${t.voTypeId == v.vTypeId }">
															${t.voTypeName }
														</c:if>
													</c:forEach>
												</a>
											</h6>
											<span><i class="fa fa-calendar"></i>${v.createTime }</span> 
											<span><i class="fa fa-heart"></i>${v.loveNumber }</span>
										</div>
									</div>
								</div>
							</c:forEach>
						</div>
						<div class="line"></div>
					</div>
					<!---- Start Widget ---->
					<div class="widget wid-news">
						<div class="heading"><h4><i class="fa fa-clock-o"></i>最新视频</h4></div>
						<div class="content">
							<c:forEach items="${newestVideos }" var="v">
								<div class="wrap-vid">
									<div class="zoom-container">
										<div class="zoom-caption">
											<c:forEach items="${videoTypes }" var="t">
												<c:if test="${t.voTypeId == v.vTypeId }">
													<span>${t.voTypeName }</span>
												</c:if>
											</c:forEach>
											<a href="../videoInfo/singleInitInfos?videoId=${v.videoId}">
												<i class="fa fa-play-circle-o fa-5x" style="color: #fff"></i>
											</a>
											<p>${v.videoName }</p>
										</div>
										<img src="${v.videoCover }" />
									</div>
									<h3 class="vid-name">
										<a href="../videoInfo/singleInitInfos?videoId=${v.videoId}">${v.videoName }</a>
									</h3>
									<div class="info">
										<h5>By 
											<a href="../videoInfo/singleInitInfos?videoId=${v.videoId}">
												<c:forEach items="${videoTypes }" var="t">
													<c:if test="${t.voTypeId == v.vTypeId }">
														${t.voTypeName }
													</c:if>
												</c:forEach>
											</a>
										</h5>
										<span><i class="fa fa-calendar"></i>${v.createTime }</span> 
										<span><i class="fa fa-heart"></i>${v.loveNumber }</span>
									</div>
								</div>
							</c:forEach>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<footer>
		<div class="top-footer">
			<ul class="footer-social list-inline">
				<li><a href="#"><i class="fa fa-twitter"></i> <span>Twitter</span></a></li>
				<li><a href="#"><i class="fa fa-facebook"></i> <span>Facebook</span></a></li>
				<li><a href="#"><i class="fa fa-google-plus"></i> <span>Google+</span></a></li>
				<li><a href="#"><i class="fa fa-youtube"></i> <span>Video's Tag</span></a></li>
				<li><a href="#"><i class="fa fa-vimeo-square"></i> <span>Vimeo</span></a></li>
				<li><a href="#"><i class="fa fa-pinterest"></i> <span>Pinterest</span></a></li>
				<li><a href="#"><i class="fa fa-rss"></i> <span>Rss</span></a></li>
			</ul>  
		</div>
		<div class="wrap-footer">
			<div class="container">
				<div class="row"> 
					<aside class="col-footer col-md-3">
						<h2 class="footer-title">About Us</h2>
						<div class="textwidget">Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae accumsan. <br> <br> 
						Aenean feugiat in ante et blandit. Vestibulum posuere molestie risus, ac interdum magna porta non. Pellentesque rutrum fringilla elementum. Curabitur tincidunt porta lorem vitae accumsan.</div>
					</aside> 
					<aside class="col-footer col-md-3 widget_recent_entries">
						<h2 class="footer-title">Recent Posts</h2>
						<ul>
							<li><a href="#">MOST VISITED COUNTRIES</a></li>
							<li><a href="#">5 PLACES THAT MAKE A GREAT HOLIDAY</a></li>
							<li><a href="#">PEBBLE TIME STEEL IS ON TRACK TO SHIP IN JULY</a></li>
							<li><a href="#">STARTUP COMPANY&#8217;S CO-FOUNDER TALKS ON HIS NEW PRODUCT</a></li>
						</ul>
					</aside>
					<aside class="col-footer col-md-3">
						<h2 class="footer-title">NEWS LETTER</h2>
						If you want to receive our latest news send directly to your email, please leave your email address bellow. Subscription is free and you can cancel anytime.
						<form action="#" method="post">
							<input type="text" name="your-name" value="" size="40" placeholder="Your Email" />
							<input type="submit" value="SUBSCRIBE" class="btn btn-3" />
						</form>
					</aside>
					<aside class="col-footer col-md-3 wptt_TwitterTweets">
						<h2 class="footer-title">Twitter</h2>
						<ul class="fetched_tweets light">
							<li class="tweets_avatar">
								<div class="tweet_wrap">
									<div class="wdtf-user-card ltr">
										<div class="clear"></div>
									</div>
									<div class="tweet_data"> Check out 'NewsTube - Magazine Blog &amp; Video' on <a href="#" target="_blank" rel="nofollow">#EnvatoMarket</a> <a href="#" target="_blank" rel="nofollow">#themeforest</a> <a href="http://t.co/jQV1MrQQKY" target="_blank" rel="nofollow">http://t.co/jQV1MrQQKY</a></div> <br/>
									<div class="clear"></div>
									<div class="times"> <em> <a href="#" target="_blank" title="Follow cactusthemes on Twitter [Opens new window]"> 2 months ago </a> </em></div>
									<div class="clear"></div>
								</div>
								<div class="clear"></div>
							</li>
							<li class="tweets_avatar">
								<div class="tweet_wrap">
									<div class="wdtf-user-card ltr"><div class="clear"></div></div>
									<div class="tweet_data"> Our latest theme 'Nano - Simple Magazine WordPress Theme' on <a href="#" target="_blank" rel="nofollow">#EnvatoMarket</a> <a href="http://twitter.com/search?q=%23themeforest" target="_blank" rel="nofollow">#themeforest</a> <a href="http://t.co/IfZTbJTk06" target="_blank" rel="nofollow">http://t.co/IfZTbJTk06</a></div> <br/>
									<div class="clear"></div>
									<div class="times"> <em> <a href="#" target="_blank" title="Follow cactusthemes on Twitter [Opens new window]"> 5 months ago </a> </em></div>
									<div class="clear"></div>
								</div>
								<div class="clear"></div>
							</li>
						</ul>
					</aside>
				</div>
			</div>
		</div>
		<div class="bottom-footer">
			<div class="container">
				<div class="row">
					<div class="col-md-6 col-sm-6 copyright">
						<span>Copyright &copy; 2015.Company name All rights reserved.<a target="_blank" href="http://www.cssmoban.com/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></span>
					</div>
					<div class="col-md-6 col-sm-6 link">
						<div class="menu-footer-menu-container">
							<ul id="menu-footer-menu" class="menu list-inline">
								<li><a href="#"><i class="fa fa-home"></i> Home</a></li>
								<li><a href="#"><i class="fa fa-comments"></i> Contact</a></li>
								<li><a href="#"><i class="fa fa-question-circle"></i> FAQ</a></li>
							</ul>
						</div>
					</div>
				</div>
			</div>
		</div> 
	</footer>
	<!-- Footer -->
	
	<!-- JS -->
	<script src="../page/owl-carousel/owl.carousel.js"></script>
	<script type="text/javascript" src="../page/js/single.js"></script>
    <script>
	    $(document).ready(function() {
	      $("#owl-demo").owlCarousel({
	        autoPlay: 3000,
	        items : 5,
	        itemsDesktop : [1199,4],
	        itemsDesktopSmall : [979,4]
	      });
	    });
    </script>
    <script type="text/javascript">
        $(function(){
        	$("#btnSend").click(function(){
        		$.ajax({
        			type: 'post',
                    url: '../VideoComment/saveVideoComment', 
                    data: {
            			commentDetails : $("#message").val(),
            			videoId : $("#videoId1").val()
            		},
                    dataType:"json",
                    success: function(data) {
                    	if (data == -1){
                    		 alert("评论失败，请重新添加！");
                    	}else {
                    		alert("评论成功！");
                    		window.location.href="../videoInfo/singleInitInfos?videoId="+data;
                    	}
                    }
        		});
        	});
        });
    </script>
</body>
</html>